<template>
    <div class="ph-indicator" :style="istyle"></div>
</template>
<script lang="ts">
import { defineComponent,computed } from 'vue'

export default defineComponent({
    props:{
        show:{
            type:Boolean,
            default:false
        },
        tx:{type:Number,default:0},
        w:{type:Number,default:0},
    },
    setup(props) {
        const istyle = computed(()=>{
            return {
                transform:`translateX(${props.tx}px)`,
                width:props.w+'px'
            }
        })
        return { istyle }
    },
})
</script>
<style lang="scss" scoped>
.ph-indicator{
    position:absolute;
    height:3px;
    background-color:var(--ph-theme);
    bottom:-1px;
    left:0;
    width:100px;
    backface-visibility: hidden;
    transform:translateX(0);
    transition:transform .3s ease-in-out;
    z-index: 1;
}
</style>
